 <!--
 * @Author: zeng_ze
 * @Date: 2019-11-7
 * @Description: 系统管理下的用户管理
 -->
<template>
  <div class="main-wrapper user-container">
    <fks-query-page
      ref="table"
      v-loading="listLoading"
      :data="tableData"
      :element-loading-text="LANG.LOADING"
      :table-name="tableName"
      :page="false"
      @query="getServerConfigData"
    >
      <template slot="singleSearch">
        <slot name="addButton" />
      </template>
      <template>
        <fks-table-column
          type="index"
          label="#"
          align="center"
          min-width="50px"
        />
        <template v-if="serverType == 'SMS'">
          <fks-table-column
            :label="LANG.SERVERE_NAME"
            prop="serverName"
            align="left"
            min-width="120"
            header-align="center"
          />
          <fks-table-column
            :label="LANG.TYPE"
            prop="type"
            width="120px"
          />
          <fks-table-column
            :label="LANG.ADDRESS"
            prop="host"
            align="left"
            min-width="120"
            header-align="center"
          />
          <fks-table-column
            :label="LANG.PORT_NUMBER"
            prop="port"
            width="120px"
          />
          <fks-table-column
            :label="LANG.ACCOUNT"
            prop="username"
            align="left"
            min-width="120"
            header-align="center"
          />
          <fks-table-column
            :label="LANG.SIGN"
            prop="sign"
            align="left"
            min-width="120"
            header-align="center"
          />
          <fks-table-column
            :label="LANG.STATE"
            prop="state"
          >
            <div slot-scope="scope">
              <fks-switch
                v-model="scope.row.state"
                :active-value="true"
                :inactive-value="false"
                :readonly="switchReadonly"
                @change="changeState(scope)"
              />
            </div>
          </fks-table-column>
        </template>

        <!-- 邮件列表内容 -->
        <template v-if="serverType == 'Mail'">
          <fks-table-column
            :label="LANG.SERVER_NAME"
            prop="serverName"
            align="left"
            min-width="120"
            header-align="center"
          />
          
          <fks-table-column
            :label="LANG.ADDRESS"
            prop="host"
            align="left"
            min-width="120"
            header-align="center"
          />
          <fks-table-column
            :label="LANG.PORT_NUMBER"
            prop="port"
            width="120px"
          />
          <fks-table-column
            :label="LANG.ACCOUNT"
            prop="username"
            align="left"
            min-width="120"
            header-align="center"
          />
          <fks-table-column
            :label="LANG.STATE"
            prop="state"
          >
            <div slot-scope="scope">
              <fks-switch
                v-model="scope.row.state"
                :active-value="true"
                :inactive-value="false"
                :readonly="switchReadonly"
                @change="changeState(scope)"
              />
            </div>
          </fks-table-column>
        </template>
        <!-- 极光推送列表 -->
        <template v-if="serverType == 'AuroraPush'">
          <fks-table-column
            :label="LANG.APP_NAME"
            prop="serverName"
            align="left"
            min-width="120"
            header-align="center"
          />
          <fks-table-column
            :label="LANG.APP_KEY"
            prop="appKey"
            align="left"
            min-width="120"
            header-align="center"
          />
          <fks-table-column
            :label="LANG.STATE"
            prop="state"
          >
            <div slot-scope="scope">
              <fks-switch
                v-model="scope.row.state"
                :active-value="true"
                :inactive-value="false"
                :readonly="switchReadonly"
                @change="changeState(scope)"
              />
            </div>
          </fks-table-column>
        </template>
        <!-- 企业微信列表 -->
        <template v-if="serverType == 'WeCom'">
          <fks-table-column
            :label="LANG.CLIENT_NAME"
            prop="serverName"
            align="left"
            min-width="120"
            header-align="center"
          />
          <fks-table-column
            :label="LANG.ENTERPRISE_ID"
            prop="corpId"
            align="left"
            min-width="120"
            header-align="center"
          />
          <fks-table-column
            :label="LANG.AGENT_ID"
            prop="agentId"
            align="left"
            min-width="120"
            header-align="center"
          />
          <fks-table-column
            :label="LANG.STATE"
            prop="state"
          >
            <div slot-scope="scope">
              <fks-switch
                v-model="scope.row.state"
                :active-value="true"
                :inactive-value="false"
                :readonly="switchReadonly"
                @change="changeState(scope)"
              />
            </div>
          </fks-table-column>
        </template>
        <!-- 钉钉列表 -->
        <template v-if="serverType == 'DingTalk'">
          <fks-table-column
            :label="LANG.CLIENT_NAME"
            prop="serverName"
            align="left"
            min-width="120"
            header-align="center"
          />
          <fks-table-column
            :label="LANG.AGENT_ID"
            prop="agentId"
            align="left"
            min-width="120"
            header-align="center"
          />
          <fks-table-column
            :label="LANG.APP_KEY"
            prop="appKey"
            align="left"
            min-width="120"
            header-align="center"
          />
          <fks-table-column
            :label="LANG.STATE"
            prop="state"
          >
            <div slot-scope="scope">
              <fks-switch
                v-model="scope.row.state"
                :active-value="true"
                :inactive-value="false"
                :readonly="switchReadonly"
                @change="changeState(scope)"
              />
            </div>
          </fks-table-column>
        </template>
        <!--飞书列表 -->
        <template v-if="serverType == 'FeiShu'">
          <fks-table-column
            :label="LANG.CLIENT_NAME"
            prop="serverName"
            align="left"
            min-width="120"
            header-align="center"
          />
          <fks-table-column
            :label="LANG.APP_ID"
            prop="appId"
            align="left"
            min-width="120"
            header-align="center"
          />
          <fks-table-column
            :label="LANG.STATE"
            prop="state"
          >
            <div slot-scope="scope">
              <fks-switch
                v-model="scope.row.state"
                :active-value="true"
                :inactive-value="false"
                :readonly="switchReadonly"
                @change="changeState(scope)"
              />
            </div>
          </fks-table-column>
        </template>
        <fks-table-column
          :label="LANG.OPERATION"
          width="100"
          align="left"
        >
          <span slot-scope="scope">
            <slot
              name="editButton"
              :scope="scope"
            />
            <slot
              name="deleteButton"
              :scope="scope"
            />
          </span>
          <!-- <span slot-scope="scope">
            <fks-button type="text" @click="edit(scope)">{{
              LANG.EDIT
            }}</fks-button>
           
          </span> -->
        </fks-table-column>
      </template>
    </fks-query-page>
    <server-config
      v-if="showDialog"
      :show-dialog="showDialog"
      :config="config"
      :server-type="serverType"
      :server-state="serverState"
      @submit="submit"
    />
  </div>
</template>
<script>
import * as types from '@/store/Getter/getterTypes.js'
import ServerConfig from './serverConfig'
import { getServerConfig, setServerConfig } from '../api'
export default {
  name: 'User',
  components: { ServerConfig },
  props: {
    serverType: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      serverState: true,
      config: {},
      showDialog: false,
      tableName: '',
      listLoading: false,
      tableData: [],
      serverConfigData: {},
      editDataIndex: 0,
      switchReadonly: false
    }
  },
  computed: {},
  watch: {
    serverType: {
      deep: true,
      immediate: true,
      handler(val) {
        switch (val) {
          case 'SMS': {
            this.tableName = this.LANG.SMS_CONFIGURATION
            break
          }
          case 'Mail': {
            this.tableName = this.LANG.MAILBOX_CONFIGURATION
            break
          }
          case 'AuroraPush': {
            this.tableName = this.LANG.AURORA_PUSH_CONFIGURATION
            break
          }
          case 'WeCom': {
            this.tableName = this.LANG.ENTERPRISE_WECHAT_CONFIGURATION
            break
          }
          case 'DingTalk': {
            this.tableName = this.LANG.DINGTALK_CONFIGURATION
            break
          }
          case 'FeiShu': {
            this.tableName = this.LANG.FEISHU_CONFIGURATION
            break
          }
        }
      }
    }
  },
  mounted() {
    this.getServerConfigData()
  },
  methods: {
    changeState(scope) {
      this.switchReadonly = true
      let params = {}
      params = JSON.parse(JSON.stringify(this.serverConfigData))
      switch (this.serverType) {
        case 'SMS': {
          params.smsServerConfig[scope.$index] = scope.row
          break
        }
        case 'Mail': {
          params.mailServerConfig[scope.$index] = scope.row
          break
        }
        case 'AuroraPush': {
          params.jpushServerConfig[scope.$index] = scope.row
          break
        }
        case 'WeCom': {
          params.qywxServerConfig[scope.$index] = scope.row
          break
        }
        case 'DingTalk': {
          params.dingTalkServerConfig[scope.$index] = scope.row
          break
        }
        case 'FeiShu': {
          params.larkServerConfig[scope.$index] = scope.row
          break
        }
      }
      setServerConfig(params)
        .then((res) => {
          if (res.status) {
            this.$message.success(this.LANG.EDIT_STATE_SUCCESS)
          } 
          this.getServerConfigData()
        })
        .catch(() => {
          this.getServerConfigData()
        })
    },
    deleteRow(scope) {
      this.$confirm(this.LANG.DELETE_CONFIRM, {
        title: this.LANG.TIPS,
        type: 'warning',
        confirmButtonText: this.LANG.DELETE,
        cancelButtonText: this.LANG.CANCEL,
        confirmButtonClass: 'fks-button--danger',
        deleteMode: true
      })
        .then(() => {
          let params = {}
          params = JSON.parse(JSON.stringify(this.serverConfigData))
          switch (this.serverType) {
            case 'SMS': {
              params.smsServerConfig.splice(scope.$index, 1)
              break
            }
            case 'Mail': {
              params.mailServerConfig.splice(scope.$index, 1)
              break
            }
            case 'AuroraPush': {
              params.jpushServerConfig.splice(scope.$index, 1)
              break
            }
            case 'WeCom': {
              params.qywxServerConfig.splice(scope.$index, 1)
              break
            }
            case 'DingTalk': {
              params.dingTalkServerConfig.splice(scope.$index, 1)
              break
            }
            case 'FeiShu': {
              params.larkServerConfig.splice(scope.$index, 1)
              break
            }
          }
          setServerConfig(params).then((res) => {
            if (res.status) {
              this.showDialog = false
              this.getServerConfigData()
              this.$message.success(this.LANG.DELETE_SUCCESS)
            }
          })
        })
        .catch(() => {})
    },
    submit(serverConfig) {
      if (serverConfig) {
        this.serverState
          ? this.addServerConfig(serverConfig)
          : this.editServerConfig(serverConfig)
      } else {
        this.showDialog = false
      }
    },
    editServerConfig(serverConfig) {
      let params = {}
      params = JSON.parse(JSON.stringify(this.serverConfigData))
      if(this.serverType != 'Mail'){
        if(!serverConfig.proxyConfig.hostName || !serverConfig.proxyConfig.port || !serverConfig.proxyConfig.scheme){
          serverConfig.proxyConfig = {
            hostName: null,
            port: null,
            scheme: null
          }
        }
      }
      switch (this.serverType) {
        case 'SMS': {
          params.smsServerConfig[this.editDataIndex] = serverConfig
          break
        }
        case 'Mail': {
          delete serverConfig.proxyConfig
          params.mailServerConfig[this.editDataIndex] = serverConfig 
          break
        }
        case 'AuroraPush': {         
          params.jpushServerConfig[this.editDataIndex] = serverConfig
          break
        }
        case 'WeCom': {         
          params.qywxServerConfig[this.editDataIndex] = serverConfig
          break
        }
        case 'DingTalk': {         
          params.dingTalkServerConfig[this.editDataIndex] = serverConfig
          break
        }
        case 'FeiShu': {       
          params.larkServerConfig[this.editDataIndex] = serverConfig
          break
        }
      }
      setServerConfig(params).then((res) => {
        if (res.status) {
          this.showDialog = false
          this.getServerConfigData()
          this.$message.success(this.LANG.EDIT_SUCCESS)
        }
      })
    },
    addServerConfig(serverConfig) {
      let serverConfigList = []
      let params = {}
      if(this.serverType != 'Mail'){
        if(!serverConfig.proxyConfig.hostName || !serverConfig.proxyConfig.port || !serverConfig.proxyConfig.scheme){
          serverConfig.proxyConfig = {
            hostName: null,
            port: null,
            scheme: null
          }
        }
      }
      params = JSON.parse(JSON.stringify(this.serverConfigData))
      switch (this.serverType) {
        case 'SMS': {
          serverConfigList = [...this.tableData, serverConfig]
          params.smsServerConfig = serverConfigList
          break
        }
        case 'Mail': {
          delete serverConfig.proxyConfig 
          serverConfigList = [...this.tableData, serverConfig]
          params.mailServerConfig = serverConfigList
          break
        }
        case 'AuroraPush': {          
          serverConfigList = [...this.tableData, serverConfig]
          params.jpushServerConfig = serverConfigList
          break
        }
        case 'WeCom': {      
          serverConfigList = [...this.tableData, serverConfig]
          params.qywxServerConfig = serverConfigList
          break
        }
        case 'DingTalk': {      
          serverConfigList = [...this.tableData, serverConfig]
          params.dingTalkServerConfig = serverConfigList
          break
        }
        case 'FeiShu': {
          serverConfigList = [...this.tableData, serverConfig]
          params.larkServerConfig = serverConfigList
          break
        }
      }
      setServerConfig(params).then((res) => {
        if (res.status) {
          this.showDialog = false
          this.getServerConfigData()
          this.$message.success(this.LANG.ADD_SUCCESS)
        }
      })
    },

    add() {
      this.showDialog = true
      this.serverState = true
      this.config = {}
    },
    edit(scope) {
      this.showDialog = true
      this.serverState = false
      this.editDataIndex = scope.$index
      this.config = JSON.parse(JSON.stringify(scope.row))
    },
    getServerConfigData() {
      this.listLoading = true
      getServerConfig()
        .then((res) => {
          if (res.status) {
            this.serverConfigData = res.data
            switch (this.serverType) {
              case 'SMS': {
                this.tableData = res.data.smsServerConfig ?? []
                break
              }
              case 'Mail': {
                this.tableData = res.data.mailServerConfig ?? []
                break
              }
              case 'AuroraPush': {
                this.tableData = res.data.jpushServerConfig ?? []
                break
              }
              case 'WeCom': {
                this.tableData = res.data.qywxServerConfig ?? []
                break
              }
              case 'DingTalk': {
                this.tableData = res.data.dingTalkServerConfig ?? []
                break
              }
              case 'FeiShu': {
                this.tableData = res.data.larkServerConfig ?? []
                break
              }
            }
          }
          this.switchReadonly = false
          this.listLoading = false
        })
        .catch(() => {
          this.listLoading = false
          this.tableData = []
        })
    }
  }
}
</script>
 <style lang="scss" scoped>
.role {
  height: 400px;
}
.user-container {
  min-width: 668px;
}
::v-deep .role-list {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
.more {
  width: 28px;
  margin-left: 5px;
}
.fks-icon-more {
  width: 28px;
}
.password {
  font-size: 12px;
}
.word {
  color: #409eff;
}
::v-deep .fks-dialog__body {
  padding-bottom: 0;
}
</style>